<template>
  <div class="nearby">
      <h3 class="nearby__title">附近店铺</h3>
      <router-link :to="`/shop/${item._id}`" v-for="item of nearbyList" :key="item._id">
        <ShopInfo :item="item" :hideBorder="true"/>
      </router-link>
  </div>
</template>

<script>
import { ref } from 'vue'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo'

// 获取附近店铺列表
const useNerbyListEffect = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const result = await get('/api/shop/hot-list')
    if (result?.errno === 0 && result?.data?.length > 0) {
      nearbyList.value = result.data
    } else {
      nearbyList.value = []
    }
  }
  return { nearbyList, getNearbyList }
}
export default {
  name: 'HomeNearby',
  components: { ShopInfo },
  setup () {
    const { nearbyList, getNearbyList } = useNerbyListEffect()
    getNearbyList()
    return { nearbyList }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";

.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-font-color;
  }
  a {
    text-decoration: none;
  }
}
</style>
